#CSS Box Model

In terms of space, an HTML element is made up of four parts: content, padding, border, and margin, as illustrated below:

    
Margin
    

        

        

            
Border
                

                    

                    

                        
Padding
                        

                            

                            

                                Content
                            
                            

                        
                        

                    
                    

                
            

        
        

    
    

In CSS, you can use the margin, padding, and border properties to set margin, padding, and border respectively.

Example:

<div style="background-color:green; overflow:hidden;">
    <div style="margin: 30px; padding: 30px; border: 3px solid red; background-color:#212121; color:cyan;">
        margin: 30px; <br/>
        padding: 30px; <br/>
        border: 3px solid red; <br/>
    </div>
</div>

Box Model

    

        margin: 30px; 

        padding: 30px; 

        border: 3px solid red; 

    

#box-sizing

By default, when setting width and height, you're setting the content box size. The box-sizing property can change this behavior.

• content-box: the size applies only to the content box (default behavior)
• border-box: the size includes padding and border

Example:

<div style="width:200px; padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    width:200px; <br/>
    padding:10px; <br/>
</div>
<br/>
<div style="box-sizing:border-box; width:200px;padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    box-sizing:border-box; 
    width:200px; <br/>
    padding:10px; <br/>
</div>

Content Box vs Border Box

    width:200px; 

    padding:10px; 





    box-sizing:border-box; 
    width:200px; 

    padding:10px;